<template>
  <div @click="toggleSwitch"
    class="relative w-[50px] h-[24px] rounded-lg cursor-pointer transition-colors duration-300 bg-gray-300 dark:bg-gray-700"
    :class="isChecked ? 'bg-primary-500 dark:bg-[#434c5a]' : ''">
    <div
      class="absolute flex items-center justify-center top-[1px] left-[2px] w-[22px] h-[22px] rounded-lg bg-white shadow-sm transition-transform duration-300 pointer-events-none"
      :class="isChecked ? 'translate-x-[24px]' : 'translate-x-0'">
      <span class="iconfont text-[#000]" :class="[isChecked ? 'icon-heiye' : 'icon-baitian']"></span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useThemeStore } from '@/store/theme';

const isChecked = ref(useThemeStore().theme === 'dark');

const toggleSwitch = () => {
  isChecked.value = !isChecked.value;
  const theme = useThemeStore().theme === 'light' ? 'dark' : 'light'
  useThemeStore().setTheme(theme)
};
watch(() => useThemeStore().theme, (newVal) => {
  isChecked.value = newVal === 'dark';
})
</script>